<template>
  <el-image
    v-bind="$attrs"
    v-on="$listeners"
    :src="imgSrc"
    :preview-src-list="previewList"
  >
    <slot name="error" slot="error"></slot>
     <slot name="placeholder" slot="placeholder"></slot>
  </el-image>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: "",
    },
    preview: {
      type: Boolean,
      default: false,
    },
    previewSrcList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    imgSrc() {
      return process.env.VUE_APP_IMG_HOST + this.src;
    },
    previewList() {
      if (this.preview && this.previewSrcList.length === 0) {
        return [process.env.VUE_APP_IMG_HOST + this.src];
      }

      return this.previewSrcList.map((x) => {
        return process.env.VUE_APP_IMG_HOST + x;
      });
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped lang="scss">
</style>
